<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>黑马程序员</title>
    <meta name="description" content="传智健康">
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/vue.js"></script>
    <!--引入elementUI的js库，必须在vue之后-->
    <script src="../element-ui/lib/index.js"></script>
    <!--引入elementUI的css库-->
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-container style="height: 1000px; border: 1px solid #f00">
        <el-header  style="font-size:40px;background-color: rgb(205, 197, 191)">
            tlias 智能学习辅助系统
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu :default-openeds="['1']">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>

                        <el-menu-item index="1-1" >
                            <a href="dept.html">部门管理</a>
                        </el-menu-item>
                        <el-menu-item index="1-2">
                            <a >员工管理</a>
                        </el-menu-item>

                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <!-- 表单 -->
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="姓名">
                        <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select v-model="searchForm.gender" placeholder="性别">
                            <el-option label="男" value="1"></el-option>
                            <el-option label="女" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>

                <!--表格-->
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            label="编号"
                            width="80">
                        <template slot-scope="scope">
                            <i class="el-icon-loading"></i>
                            <span style="margin-left: 10px">{{ scope.row.id }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="姓名"
                            width="120">
                        <template slot-scope="scope">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.name }}</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="图像"
                            width="180">
                        <template slot-scope="scope">
                            <img width="180" height="100" :src="scope.row.image" alt="图片读取失败">
                            <!--                {{ scope.row.image }}-->
                        </template>
                    </el-table-column>

                    <el-table-column
                            label="性别"
                            width="80">
                        <template slot-scope="scope">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium" v-if="scope.row.gender==1">男</el-tag>
                                <el-tag size="medium" v-if="scope.row.gender==2">女</el-tag>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column
                            label="职位"
                            width="120">
                        <template slot-scope="scope">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.job }}</el-tag>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column
                            label="入职日期"
                            width="140">
                        <template slot-scope="scope">
                            <div slot="reference" class="name-wrapper">
                                <i class="el-icon-date"></i>
                                <el-tag size="medium">{{ scope.row.entrydate }}</el-tag>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column
                            label="最后操作时间"
                            width="180">
                        <template slot-scope="scope">
                            <div slot="reference" class="name-wrapper">
                                <i class="el-icon-date"></i>
                                <el-tag size="medium">{{ scope.row.updateTime }}</el-tag>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column
                            label="分数"
                            width="100">
                        <template slot-scope="scope">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.score }}</el-tag>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column
                            label="年龄"
                            width="100">
                        <template slot-scope="scope">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.age }}</el-tag>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <br>
                <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        layout="sizes,prev, pager, next,jumper,total"
                        :current-page="1"
                        :page-sizes="[2, 3, 10, 100]"
                        :page-size="3"
                        :total="total">
                </el-pagination>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            tableData: [],
            searchForm: {
                name:"",
                gender:""
            },
            total:""
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            onSubmit(){
                //发送ajax请求
                axios.get("/emp/condition",{
                    params:{
                        name : this.searchForm.name,
                        gender : this.searchForm.gender,
                        page: 1,
                        pageSize: 10
                    }
                    }
                ).then(resp=>{

                    //将返回的数据，赋值给vue中的emps变量
                    this.tableData = resp.data.data.rows;
                    console.log(this.tableData);
                })
            },
            handleDelete($index, row) {
                axios.delete(`/emp/${row.id}`)
                    .then((response) => {
                        console.log("删除成功");
                        // 在删除成功后，可以执行一些其他操作或刷新页面等
                        // 删除成功后显示提示窗口
                        this.$message.success("删除成功");

                        // 更新表格数据
                        this.tableData.splice($index, 1);
                    })
                    .catch((error) => {
                        console.error("删除失败", error);
                        // 删除成功后显示提示窗口
                        // 处理删除失败的逻辑
                        this.$message.success("删除失败");
                    });
            }
        },
        mounted() {
            console.log("页面加载结束!要发送ajax请求了!")

            //发送ajax请求
            axios.get("/emp/condition",{
                    params:{
                        name : this.searchForm.name,
                        gender : this.searchForm.gender,
                        page: 1,
                        pageSize: 10
                    }
                }
            ).then(resp=>{

                //将返回的数据，赋值给vue中的emps变量
                this.tableData = resp.data.data.rows;
                this.total = resp.data.data.total;
                console.log(this.tableData);
            })
        },
    })
</script>
</html>